Vue(axios) + expressでセッション管理
Introduction
先日、クライアント側をVue.js、サーバ側をExpressで
sessionを使おうとしたら少々つまづいたので、使用に関するメモです。
Environment
- Client framework : Vue.js 3.0.11
- Http Client : axios 0.21.1
- Node : v14.16.1
- express-session : 1.17.2
Create Vue template
とりあえず動くものがほしかったので、ここ からgit cloneしてソースもってきました。
% git clone https://github.com/bezkoder/vue-3-typescript-example % cd vue-3-typescript-example % npm install % npm run serve > vue-3-typescript-example@0.1.0 serve vue-3-typescript-example > vue-cli-service serve INFO Starting development server... App running at: - Local: http://localhost:8081/ - Network: http://192.168.11.2:8081/ Note that the development build is not optimized. To create a production build, run npm run build. Issues checking in progress... No issues found.
npm installしてnpm runすれば8081ポートで起動します。
CRUD機能が試せるみたいですが、(自分の環境では)動きませんでした。
が、ひととおり設定はできてるのでこれでOK。
このテンプレートではサーバとの通信にaxiosをつかっているのですが、
セッションを使うためにsrc/http-common.tsを修正します。
const apiClient: AxiosInstance = axios.create({ baseURL: "<サーバサイドAPIのURL>", withCredentials: true, headers: { "Content-type": "application/json" }, });
withCredentials というパラメータをtrueに設定すればOKとのことです。
Create Express template
次はサーバサイドをExpressでつくります。
まずはexpress-generatorをインストール。
% npm install express-generator
expressコマンドでテンプレート作成します。
% express express-server % cd express-server % npm install
express-sessionをインストール。
% npm install express-session
app.jsでexpress-sessionを使い、セッションの設定をします。
ドキュメントはこのへんをみました。
//app.js var session = require('express-session') app.use(session({ secret: 'keyboard cat', resave: false, saveUninitialized: true, maxage: 1000 * 60 * 30 }))
あとはrequest.sessionで情報を取得したり、 request.session.hogeとか適当に値を設定したりします。
//routes/index.js router.get('/api/hogehoge', function(req, res, next) { req.session res.json({'message': 'Hello World'}) });
このAPIをさきほどのVueクライアントから呼び出すようにすればOKです。